<!-- 列表形式1（无图） -->
<template>
  <div class="list-container">
    <div class="content-wrapper">
      <div class="cards-container">
        <div v-for="(item, index) in list" :key="item.id" class="card" :style="getCardStyle(index)" >
          <div class="create-time">{{ item.createTime }}</div>
          <div class="card-title">{{ item.title }}</div>
          <div class="card-content">{{ item.textContent }}</div>
        </div>
      </div>
    </div>

    <div class="pagination">
      <button v-if="currentPage > 1" @click="handlePageChange(currentPage - 1)" class="page-button">
        ←
      </button>
      <button v-for="page in pageNumbers" :key="page" @click="handlePageChange(page)" :class="['page-button', { active: currentPage === page }]">
        {{ page }}
      </button>
      <button v-if="currentPage < totalPages" @click="handlePageChange(currentPage + 1)" class="page-button">
        →
      </button>
    </div>
  </div>
</template>
  
  <script setup lang="ts">
import { ref, computed, watch, onMounted, onBeforeUnmount } from 'vue'
import { useRouter } from 'vue-router'

interface ContentItem {
	id: string
	createTime: string
	title: string
	content: string
	textContent?: string
	categoryId?: string
}

interface PageItem {
	index: number
	active: boolean
}

const props = defineProps<{
	contentArr: ContentItem[]
}>()

const router = useRouter()

// 响应式数据
const list = ref<ContentItem[]>([])
const scrollIndex = ref(0)
const scrollDistance = ref(0)
const currentPage = ref(1)
const itemsPerPage = 10

// 计算属性
const totalPages = computed(() => Math.ceil(props.contentArr.length / itemsPerPage))
const pageNumbers = computed(() => Array.from({ length: totalPages.value }, (_, i) => i + 1))

// 初始化
const init = () => {
	updatePageList()
	updateContentList()
}

// 更新分页列表
const updatePageList = () => {
	currentPage.value = Math.min(currentPage.value, totalPages.value)
}

// 更新内容列表
const updateContentList = () => {
	const start = (currentPage.value - 1) * itemsPerPage
	const end = currentPage.value * itemsPerPage
	list.value = props.contentArr.slice(start, end).map(item => ({
		...item,
		textContent: parseHtmlContent(item.content)
	}))
}

// 解析 HTML 内容
const parseHtmlContent = (html: string): string => {
	return new DOMParser().parseFromString(html, 'text/html').body.textContent || ''
}

// 处理分页变化
const handlePageChange = (page: number) => {
	if (page < 1 || page > totalPages.value) return
	currentPage.value = page
	updateContentList()
}


// 获取卡片样式
const getCardStyle = (index: number) => ({
	opacity: index <= scrollIndex.value + 1 ? 1 : 0
})

// 滚动处理
const handleScroll = (event: Event) => {
	const target = event.target as HTMLElement
	const scrollTop = target.scrollTop
	const windowHeight = window.innerHeight / 3

	if (scrollDistance.value > scrollTop) {
		if (scrollTop <= windowHeight * scrollIndex.value && scrollIndex.value > 0) {
			scrollIndex.value--
		}
	} else {
		if (scrollTop >= windowHeight * (scrollIndex.value + 1)) {
			scrollIndex.value++
		}
	}
	scrollDistance.value = scrollTop
}

// 生命周期钩子
onMounted(() => {
	const container = document.querySelector('.list-container')
	container?.addEventListener('scroll', handleScroll)
	init()
})

onBeforeUnmount(() => {
	const container = document.querySelector('.list-container')
	container?.removeEventListener('scroll', handleScroll)
})

// 监听器
watch(() => props.contentArr, init)
watch(currentPage, updateContentList)
</script>
  
  <style scoped lang="scss">
.list-container {
	width: 100%;
	margin: 10vh 0;
}

.content-wrapper {
	width: 100%;
	display: flex;
	justify-content: center;
}

.cards-container {
	width: 80%;
}

.card {
	width: 100%;
	height: 25vh;
	background-color: #fbfbfe;
	padding: 2vw;
	margin-bottom: 5vh;
	transition: opacity 0.5s ease, box-shadow 0.3s ease, background-color 0.3s ease;

	&:hover {
		box-shadow: 0 0 1vw rgba(0, 0, 0, 0.7);
		background-color: #fff;

		.card-title {
			color: #28245e;
		}
	}
}

.create-time {
	color: #727272;
}

.card-title {
	font-weight: 500;
	font-size: 3.5vh;
	line-height: 6vh;
	color: #000;
	transition: color 0.3s ease;

	display: -webkit-box;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-overflow: ellipsis;
}

.card-content {
	color: #727272;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-overflow: ellipsis;
}

.pagination {
	margin-top: 10vh;
	display: flex;
	justify-content: center;
	align-items: center;
}

.page-button {
	width: 5vh;
	height: 5vh;
	border-radius: 50%;
	margin: 1vh;
	padding: 1vh;
	color: #28245e;
	border: 1px solid #28245e;
	background-color: #fff;
	font-weight: bold;
	cursor: pointer;
	transition: background-color 0.3s ease, color 0.3s ease;

	&:hover,
	&.active {
		background-color: #28245e;
		color: #fff;
	}
}
</style>